import React, { useContext } from 'react'
import { Button, Table, Popconfirm } from 'antd'
import { ColumnsType } from 'antd/lib/table'
// import { useNavigate } from 'react-router-dom'
import moment from 'moment'
import styles from './index.module.less'
import IconSvg from '@/components/IconSvg'
import { context } from '../../_context'

export default () => {
  const { tableParams, manageParams } = useContext(context)
  const { handleChangePage, pageParams, setShowMange } = tableParams
  // const navigate = useNavigate()

  const columns: ColumnsType<any> = [
    {
      title: '病区一级分类',
      dataIndex: 'oneTypeName',
      align: 'center',
      width: '160px',
    },
    {
      title: '病区二级分类',
      dataIndex: 'twoTypeName',
      align: 'center',
      width: '160px',
    },
    {
      title: '病区名称',
      dataIndex: 'wardName',
      align: 'center',
      width: '140px',
    },
    {
      title: '负责人姓名',
      dataIndex: 'username',
      align: 'center',
      width: '140px',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      align: 'center',
      width: '140px',
    },
    {
      title: '登录次数',
      dataIndex: 'loginTimes',
      align: 'center',
      width: '140px',
    },
    {
      title: '上次登录时间',
      dataIndex: 'lastLoginDate',
      align: 'center',
      width: '180px',
      render: (value: string) => <span>{value ? moment(value).format('YYYY-MM-DD   HH : mm : ss') : ''}</span>,
    },
    {
      title: '操作',
      align: 'center',
      fixed: 'right',
      width: '220px',
      render: (value: string, record: any) => (
        <div className={styles.operation}>
          <Button
            icon={<IconSvg name='' />}
            type='link'
            onClick={() => {
              tableParams.clickExamine(record)
            }}
          >
            <IconSvg name='cityExamine' style={{ marginRight: 5 }} /> 查看
          </Button>
          <Button
            icon={<IconSvg name='' />}
            type='link'
            onClick={() => {
              manageParams.clickEditWordAdminModal(record)
            }}
          >
            <IconSvg name='cityEdit' style={{ marginRight: 5 }} />
            编辑
          </Button>
          <Popconfirm
            onConfirm={() => {
              tableParams.affifmDelete(record)
            }}
            title='确定删除吗？'
            okText='确认'
            cancelText='取消'
          >
            <Button icon={<IconSvg name='' />} type='link' danger>
              <IconSvg name='cityDelete' style={{ marginRight: 5 }} /> 删除
            </Button>
          </Popconfirm>
        </div>
      ),
    },
  ]
  return (
    <Table
      rowKey='id'
      scroll={{ x: 'max-content' }}
      dataSource={tableParams.tableData}
      columns={columns}
      pagination={{
        position: ['bottomRight'],
        total: pageParams.totalCount,
        onChange: (page: number, pageSize: number | undefined) => {
          if (pageSize && pageSize !== pageParams.pageSize) {
            // 更换了页数
            handleChangePage(1, pageSize || pageParams.pageSize)
            return
          }
          handleChangePage(page, pageSize || pageParams.pageSize)
        },
        current: pageParams.pageIndex,
        pageSize: pageParams.pageSize,
        showSizeChanger: true,
        // showQuickJumper: true,
        showTotal: (total: number) =>
          `共 ${total} 条记录  第 ${pageParams.pageIndex} / ${Math.ceil(total / pageParams.pageSize)}页`,
      }}
    />
  )
}
